<template>
    <view class="certifiedMember">
        <u-notify ref="uNotify"></u-notify>

        <!-- 头像弹窗 -->
        <image class="rzbj" src="https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/06/1651838556524083527111b6ec0fbceae9de87b29055.png"
            mode="widthFix"></image>
        <u-action-sheet :actions="lists" :show="chooseAvaters" @select="editAvater" @close="chooseAvaters=false"></u-action-sheet>

        <u-picker :show="showdizhi" ref="uPicker" :columns="cityList" keyName="title" @confirm="confirm" @change="changeHandler">
        </u-picker>
        <view class="formBox" :style="{paddingBottom:(type=='1' ? '120rpx':'60rpx')}">
            <u--form labelPosition="left" :model="form" ref="form1">
                <u-form-item class=" " label=" " prop="avatar" borderBottom ref="item1">
                    <view class=" avatar">

                        <view class="vh-c avaterBox u-demo-block">
                            <image :src='imgArr' @click="chooseAvater"></image>
                        </view>
                    </view>
                </u-form-item>
                <u-form-item label="姓名" prop="name" borderBottom ref="item1">
                    <u--input v-model="form.name" border="none" placeholder="请输入姓名" @input="changeinput($event,'name')"></u--input>
                </u-form-item>
                <u-form-item label="身份证号" prop="idCard">
                    <u--input v-model="form.idCard" @input="changeinput($event,'idCard')" />
                </u-form-item>
                <u-form-item label="手机号" prop="phone">
                    <u--input v-model="form.phone" @input="changeinput($event,'phone')" />
                </u-form-item>
                <u-form-item label="工龄(年)" prop="serviceLength">
                    <u-number-box integer v-model="form.serviceLength" :min="0" :max="100" @change="valChange"></u-number-box>
                </u-form-item>
                <u-form-item label="擅长技能" prop="skill">
                    <u--textarea v-model="form.skill" @input="changeinput($event,'skill')" />
                </u-form-item>
                <u-form-item label="所在城市" prop="cityName" @click="showdizhi=true">
                    <u--input v-model="form.cityName" :disabled="true" />
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <!-- <u-form-item label="案例图片" prop="images">
                    <view class="u-demo-block shigongimgs">
                        <view class="u-demo-block__content">
                            <view class="u-page__upload-item">
                                <u-upload :fileList="imagesList" @afterRead="afterRead" @delete="deletePic" name="4" multiple :maxCount="6">
                                </u-upload>
                            </view>
                        </view>
                    </view>
                </u-form-item> -->
            </u--form>
            <!-- {{protocol}} -->
            <view class="checkboxBox">
                <u-checkbox-group v-model="protocol">
                    <u-checkbox value="1" name='asd'></u-checkbox>
                    <div @click="protocolShow=true">已认真阅读并同意《用户服务协议》及《隐私政策》</div>
                </u-checkbox-group>
            </view>

            <u-popup :show="protocolShow" mode="center" @close="protocolShow=false" @open="open">
                <div class="protocolBox">
                    <h2>《用户服务协议》及《隐私政策》</h2>
                    <div>
                        为使用本平台微信小程序服务（以下简称“本服务”或“小程序服务”），您应当阅读并遵守《本平台微信小程序用户协议》，请务必审慎阅读、充分理解各条款内容，特别是免除或限制责任的相应条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。
                        除非您已阅读并接受本条款所有条款，否则您无权使用本平台微信小程序服务。您对本服务的登录、查看、发布信息等行为即视为已阅读并同意本条款的约束。
                        如果您未满18周岁，请在法定监护人的陪同下阅读本您协议，并特别注意未成年人使用条款。<br />
                    </div>
                    <div>
                        一、协议的范围<br />
                        1.1本条款是用户（以下简称“您”）与本平台之间关于用户使用小程序服务所订立的协议。“用户”是指注册、登录、使用微信小程序的个人或组织；“其他用户”是指包括其他微信小程序用户、微信公众账号用户和微信用户等除您本人外与小程序服务相关的用户。<br />
                        1.2本服务是指本平台根据本协议向您提供的服务，包括协助您交接和管理租赁车辆等。我们会不断丰富您使用本服务的终端、形式等，如您已注册使用一种形式的服务，则可以以同一账号使用其他服务，本协议自动适用于您对所有版本的软件和服务的使用。<br />
                        1.3提供本服务的微信小程序的所有权和全部的使用权均归本平台所有，您开通后仅授权使用部分功能，具体以产品展示的为准。<br />
                        1.4小程序属于微信公众账号，在不与本协议冲突的情况下，您应遵守《微信公众平台服务协议》、《腾讯微信软件许可及服务协议》等关于微信公众账号的其他相关规定。<br />
                        1.5本协议内容包括本协议正文及所有我们已经发布或将来可能发布的隐私权政策、各项政策、规则、声明、通知、警示、提示、说明（以下统称为“用户规则”）。前述用户规则为本协议不可分割的补充部分，与本协议具有同等法律效力。如您使用本平台产品及服务，视为您同意上述补充部分。<br />
                    </div>
                    <div>
                        二、小程序注册与审核<br />
                        2.1账号注册<br />
                        2.1.1您在使用本服务前需要先进行注册和认证。您确认，在您开始注册使用本平台产品及服务前，您应当是具备完全民事权利能力和与所从事的民事行为相适应的行为能力的自然人、法人或其他组织。若您不具备前述主体资格，请勿使用服务，否则您及您的监护人应承担因此而导致的一切后果，且我们有权注销（永久冻结）您的账户，并向您及您的监护人索偿。<br />
                        2.1.2当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，您可获得本平台平台账户并成为产品用户，即有权使用本平台平台并获得相应服务。<br />
                        2.1.3该账户是您通过本平台平台寻求并获得服务的唯一有效身份证明，请您妥善保管账号和密码。为使您更好地使用本平台平台的各项服务，保障您的账户安全，本小程序主体可要求您按本协议、用户规则及我国法律规定完成实名认证。<br />
                        2.1.4为维护小程序的健康运营，您应当准确完整地提供您的最新信息（包括您的名称及电子邮件地址、联系电话、联系地址等）。并且您承诺，在使用本服务的过程中提交和发布的信息均是真实、合法的，因不实信息导致本平台或者第三方合法权益受损的，由您独立承担全部责任。<br />
                        2.2账号安全<br />
                        2.2.1在您成功注册后，我们将根据您的身份要素识别您的身份和授权登录。“身份要素”包括但不限于您的账户名称、密码、短信校验码、手机号码、身份证件号码及人脸信息、眼纹信息。您同意基于不同的终端以及您的使用习惯，我们可能采取不同的验证措施识别您的身份。<br />
                        2.2.2如您发现账号遭他人非法使用，应立即通知本小程序主体。因黑客行为或您自身保管疏忽导致账号、密码遭他人非法使用所发生的一切责任，均应由您本人承担，本小程序主体不承担任何责任。<br />

                    </div>
                </div>
            </u-popup>
            <!-- {{type}} -->
            <u-button v-if="type=='0'" type="primary" text="提交" :disabled="disabledbtn" @click="submit" style="margin-top:20rpx !important;">
            </u-button>
            <view class="gotoPay vh-cb" v-show="type=='1'">
                <view>
                    <view class="title">
                        会员保证金
                    </view>
                    <view class="vh-c text">
                        <image src=" ../../static/imgs/warming.png" mode="" />
                        成为会员需缴纳{{userInfo.amount?userInfo.amount:300}}元保证金
                    </view>
                </view>
                <u-button @click.stop="submit" class="gotopaybutton" :disabled="disabledbtn">
                    去支付
                </u-button>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: '',
                serviceLength: 0,
                avatar: 'https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/21/1653100576334vqCDPBoOfZdH3cfcbb5c340a3ec65a7f22615cb1f39b.png',

            },
            imgArr: require('../../static/imgs/ren.png'),
            showdizhi: false,

            imagesList: [],
            rules: {
                name: {
                    type: 'string',
                    required: true,
                    message: '请填写姓名',
                    trigger: ['blur', 'change']
                },
                phone: [{
                    type: 'string', required: true, message: '请填写手机号', trigger: ['blur', 'change']
                }, {
                    validator: (rule, value, callback) => {
                        return uni.$u.test.mobile(value);
                    },
                    message: "请填写正确的手机号",
                    trigger: ["change", "blur"],
                }],
                idCard: [{ type: 'string', required: true, message: '请填写身份证号', trigger: ['blur', 'change'] },
                {
                    validator: (rule, value, callback) => {
                        return uni.$u.test.idCard(value);
                    },
                    message: "请填写正确的身份证号",
                    trigger: ["change", "blur"],
                }],
                skill: {
                    type: 'string',
                    required: true,
                    message: '请填写擅长技能',
                    trigger: ["change", "blur"],
                },
                cityName: {
                    type: 'string',
                    required: true,
                    message: '请选择所在城市',
                    trigger: ["change", "blur"],
                },
                // avatar: {
                //     type: 'string',
                //     required: true,
                //     message: '请上传头像',
                //     trigger: ["change", "blur"],
                // },

                // images: [{ required: true, message: '请上传' }],
            },
            cityList: [],
            chooseAvaters: false,
            lists: [  // 操作菜单的列表内容
                {
                    name: '更换头像',
                    color: '',
                    type: 1,
                    fontSize: '28',
                },
                {
                    name: '查看大图',
                    color: '',
                    type: 2,
                    fontSize: '28',
                }
            ],
            showdizhi: false,
            protocol: '',
            protocolShow: false,
            disabledbtn: false,
            type: ''
        }
    },
    onLoad(option) {
        this.type = option.type
    },
    //页面显示
    onShow() {
        this.getCity()
        this.userInfo = this.$store.state.userInfo ? this.$store.state.userInfo : ''
        wx.login({
            success: (res) => {
                if (res.code) {
                    this.$http.get('getOpenid/' + res.code).then(res1 => {
                        this.opget = res1
                    }, err => {
                        loginStart = true;
                    });
                } else {
                    console.log('登录失败！' + res.errMsg)
                }
            }
        })
    },
    onReady() {
        // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
        this.$refs.form1.setRules(this.rules)
    },
    methods: {

        changeinput(value, machIndex) {
            this.form[machIndex] = value
            this.$forceUpdate()
        },
        async submit() {
            let param = await this.verify()
            if (this.type == '1') {
                await this.gotoPay()
                await this.certification(param);
            }
            await this.certification(param);
        },
        chooseAvater() {
            this.chooseAvaters = true

        },
        editAvater(e) {
            if (e.type === 1) {
                this.chooseImage()
            } else {
                this.previewImage()
            }
        },
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 1,//限制图片上传数量，封顶9张
                success: (res) => {//拿到图片的返回数据
                    uni.uploadFile({
                        url: that.$base.baseUrl + "sys/common/upload", // 仅为示例，非真实的接口地址
                        filePath: res.tempFilePaths[0],
                        name: 'file',
                        header: {
                            "token": uni.getStorageSync("userInfo").token //token校验
                        },
                        success: (res1) => {
                            this.imgArr = res.tempFilePaths
                            this.chooseAvaters = false
                            this.form.avatar = JSON.parse(res1.data).data
                            this.$forceUpdate()
                        }
                    });
                }
            })
        },
        previewImage() {
            uni.previewImage({
                urls: [this.imgArr],//拿头像地址
            })
        },

        // 删除图片
        deletePic(event) {
            this.imagesList.splice(event.index, 1)
            this.form.images.splice(event.index, 1)
        },
        // 新增图片
        async afterRead(event) {
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this.imagesList.length
            lists.map((item) => {
                this.imagesList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                let item = this.imagesList[fileListLen]
                this.imagesList.splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result
                }))
                fileListLen++
            }
        },
        uploadFilePromise(url) {
            let that = this
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: that.$base.baseUrl + "sys/common/upload", // 仅为示例，非真实的接口地址
                    filePath: url,
                    name: 'file',
                    header: {
                        "token": uni.getStorageSync("userInfo").token //token校验
                    },
                    success: (res) => {
                        that.form.images = that.form.images ? that.form.images : []
                        that.form.images.push(JSON.parse(res.data).data)
                        resolve(res.data.data)
                    }
                });
            })
        },

        getCity() {
            this.$http.get('/promotion/workerInfo/city_list').then(val => {
                this.cityList[0] = val.data
            })
        },
        //选择地址
        confirm(e) {
            this.showdizhi = false
            this.form.cityName = e.value[0].title
            this.form.cityId = e.value[0].id
            this.$forceUpdate()

        },
        //验证
        verify() {
            let that = this
            return new Promise((resolve, reject) => {
                if (!that.protocol[0]) {
                    that.$refs.uNotify.show({
                        // top: 10,
                        type: 'error',
                        color: '#fff',
                        bgColor: '#FFC386',
                        message: '请认真阅读并同意《用户服务协议》及《隐私政策》',
                        duration: 1000 * 2,
                        fontSize: 28,
                        // safeAreaInsetTop: true
                        safeAreaInsetTop: false
                    })
                    return
                    reject()
                }
                // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
                that.$refs.form1.validate().then(res => {
                    let param = JSON.parse(JSON.stringify(that.form))
                    param.imgaes = param.images ? param.images.join(',') : ''
                    delete param.images
                    param.userId = uni.getStorageSync("userInfo").userId
                    param.type = that.type
                    uni.showLoading({
                        title: '加载中'
                    });
                    resolve(param)
                    that.disabledbtn = true;
                }).catch(errors => {
                    reject()
                    uni.$u.toast('请补全信息')
                })
            })
        },
        //认证
        certification(param) {
            let that = this
            return new Promise((resolve, reject) => {
                that.$http.post('/app/user_info/certification', param).then(val => {
                    if (val.code == 200) {
                        that.$http.post('login', {
                            mobile: uni.getStorageSync('weChatMobile')
                        }).then(val => {
                            that.$store.commit('setUserInfo', val.data);
                            uni.navigateBack();
                            that.disabledbtn = false
                            uni.showToast({
                                title: val.message,
                                icon: "success",
                                duration: 2000
                            });
                        })
                    }
                    else {
                        uni.showToast({
                            title: val.message,
                            icon: "none",
                            duration: 2000
                        });
                        that.disabledbtn = false
                        uni.hideLoading();
                    }
                }).catch(errors => {
                    uni.hideLoading();
                    that.disabledbtn = false
                })

            })
        },
        gotoPay() {
            let that = this
            return new Promise((resolve, reject) => {
                that.$http.post('/wx/pay/wx_unified_order', {
                    openid: that.opget.data.openid
                }).then(val => {
                    uni.requestPayment({
                        provider: 'wxpay',    //支付类型-固定值
                        timeStamp: val.data.data.timeStamp, // 时间戳（单位：秒）
                        nonceStr: val.data.data.nonceStr, // 随机字符串
                        package: val.data.data.package, // 固定值
                        signType: val.data.data.signType, //固定值
                        paySign: val.data.data.paySign, //签名
                        success: function (res) {
                            resolve()
                        },
                        fail: function (err) {
                            that.disabledbtn = false
                            uni.showToast({
                                title: '支付失败',
                                icon: "success",
                                duration: 2000
                            });
                            reject()
                            console.log("支付失败");
                        }
                    });
                })
            })

        }
    },
}
</script>


<style lang="scss">
.certifiedMember {
    background-color: #fff;
    min-height: 100vh;
    .rzbj {
        width: 100%;
    }
    .formBox {
        background-color: #fff;
        border-radius: 30rpx 30rpx 0 0;
        top: -30rpx;
        position: relative;
        min-height: 100vh;
        background-color: #fff;
        padding: 30rpx 40rpx 60rpx 40rpx;
        .avatar {
            .u-demo-block {
                .u-upload__wrap__preview {
                    border-radius: 50%;
                    box-shadow: 0px 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
                    // border: 6rpx solid #ffffff;
                }
                .u-upload__wrap {
                    display: flex;
                    justify-content: center;
                }
                image {
                    width: 120rpx !important;
                    height: 120rpx !important;
                    border-radius: 50%;
                    box-shadow: 0px 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
                }
                .tip {
                    margin-top: 10rpx;
                    font-size: 22rpx;
                    font-weight: 400;
                    color: #999999;
                    line-height: 37rpx;
                }
            }
        }
        .u-form-item {
            border: none;
        }
        .u-upload__wrap__preview__image,
        .u-upload__button {
            width: 200rpx !important;
            height: 200rpx !important;
        }
        .u-upload__deletable {
            width: 50rpx !important;
            height: 50rpx !important;
            text {
                top: 20rpx !important;
                font-size: 40rpx !important;
            }
        }
        .u-input__content {
            padding: 20rpx;
        }
        .u-border {
            border: none !important;
        }
        .u-line {
            display: none;
        }
        .u-form-item__body__right__message {
            margin-left: 0 !important;
        }
        .u-form-item__body {
            display: block !important;
        }
        .u-input--square,
        .select {
            margin: 0 !important;
            background: #f8f8f8 !important;
            padding: 0 !important;
        }
        .u-form-item__body__left__content__label {
            white-space: nowrap;
            font-size: 36rpx !important;
            font-weight: 600 !important;
            color: #000000 !important;
            line-height: 50rpx !important;
            margin: 20rpx 0 !important;
        }
        .u-input,
        .u-textarea {
            margin-top: 20rpx;
            background: #f8f8f8 !important;
            border-radius: 8rpx;
            border: none;
            // padding: 20rpx !important;
        }

        .u-picker__view__column,
        .u-picker__view {
            height: 40vh !important;
        }

        .u-number-box__plus,
        .u-number-box__input,
        .u-number-box__minus {
            height: 70rpx !important;
            width: 60rpx !important;
        }
        .shigongimgs {
            margin-bottom: 40rpx;
            .uicon-camera-fill {
                font-size: 60rpx !important;
            }
        }
    }
    .avaterBox {
        padding: 40rpx 0;
    }
    .u-picker__view__column,
    .u-picker__view {
        height: 40vh !important;
    }
    .gotoPay {
        position: fixed;
        bottom: 0;
        width: 100vw;
        left: 0;
        z-index: 100;
        padding: 30rpx;
        background-color: #fff;
        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: #000000;
            line-height: 45rpx;
        }
        .text {
            font-size: 24rpx;
        }
        image {
            width: 20rpx;
            height: 20rpx;
        }
        button {
            width: 150rpx;
            color: #fff;
            background-color: #eb5e00;
        }
    }
    .checkboxBox {
        margin-bottom: 20rpx;
        font-size: 26rpx;
    }
    .protocolBox {
        width: 80vw;
        height: 80vh;
        padding: 20rpx;
        overflow-x: scroll; /*只是x方向*/
        div {
            padding: 10rpx 0;
        }
    }
    .u-checkbox__icon-wrap {
        width: 35rpx !important;
        height: 35rpx !important;
    }
}
</style>